<template>
	<div>
	<topbar :title="title"></topbar>
	<section class='m-detail'>
		 <img :src="img" alt="">
        <div class="detail-info">
            <div class="u-title">影片简介</div>
            <p>导　　演：{{detailInfo.director}}</p>
            <p>主　　演：<span v-for="item in detailInfo.actors">{{item.name}}</span></p>
            <p>地区语言：{{detailInfo.nation}} ({{detailInfo.language}})</p>
            <p>类　　型：{{detailInfo.category}}</p>
            <p>上映日期：{{detailInfo.premiereAt | formateDate}}</p>
            <p class="desc">{{detailInfo.synopsis}}</p>
        </div>
        <a href="javascript:;">立即购票</a>

	</section>
	</div>
</template>
<script>
	import $ from 'jquery';
	import topbar from './../home/topbar.vue';
	export default{
		data:function () {
			return {
				detailInfo:{},
				img:'',
				title:''
			}
		},
		components:{
			topbar:topbar
		},
		filters:{
			'formateDate':function (t) {
				var time = new Date(t);
				var m = time.getMonth()+1;
				var d = time.getDate();
				return m + '月' + d + '日上映';
			}
		},
		mounted:function() {
			var url = 'http://localhost:3000/' + this.$route.params.id  + '?time=' + new Date().getTime();
			var that = this;
			$.get(url,function(res) {
				that.detailInfo = res.data.film;
				that.img = res.data.film.cover.origin;
				that.title=res.data.film.name;
			})
		}
	}
</script>
<style>
	.m-detail img { width: 100%; }

    .m-detail { color: #333; }
    .detail-info .u-title { 
    	margin: 16px auto; 
    	border-left: 16px solid rgb(228, 200, 156);
    	 font-size: 16px; 
    	 padding-left: 4px;
    }

    .detail-info p { 
    	height: 12px; 
    	overflow: hidden; 
    	margin-bottom: 16px; 
    	padding-left: 20px; 
    	font-size: 12px;
    }
    .detail-info p.desc { 
    	height: auto; 
    	line-height: 1.5; 
    	margin-bottom: 80px; 
    	padding-right: 20px;
    }

    .m-detail a { 
    	display: inline-block; 
    	font-size: 14px; 
    	min-width: 156px; 
    	height: 36px; 
    	line-height: 36px; 
    	background-color: #fe8233; 
    	border-radius: 18px; 
    	color: #fff; 
    	text-align: center; 
    	position: fixed; 
    	bottom: 20px; left: 50%; 
    	margin-left: -78px; 
    	text-decoration: none;
    }
</style>